<template>
  <div class="layout">
    <!-- 导航栏 -->
    <nav class="navbar">
      <div class="logo">Vue商城</div>
      <div class="nav-links">
        <router-link 
          :to="{ name: 'Home' }" 
          :class="{ active: $route.name === 'Home' }"
        >
          首页
        </router-link>
        <router-link 
          :to="{ name: 'ProductList' }" 
          :class="{ active: $route.name === 'ProductList' }"
        >
          产品列表
        </router-link>
        <router-link 
          :to="{ name: 'Orders' }" 
          :class="{ active: $route.name === 'Orders' }"
          v-if="authStore.isAuthenticated"
        >
          我的订单
        </router-link>
        <router-link 
          :to="{ name: 'Contact' }" 
          :class="{ active: $route.name === 'Contact' }"
        >
          平台介绍
        </router-link>
        <router-link 
          :to="{ name: 'Admin' }" 
          :class="{ active: $route.name === 'Admin' }"
          v-if="authStore.isAdmin"
        >
          管理后台
        </router-link>
      </div>
      
      <div class="user-actions">
        <div class="balance" v-if="authStore.isAuthenticated">
          <span>余额: ¥{{ userBalance }}</span>
          <button class="recharge-btn" @click="showRecharge">充值</button>
        </div>
        
        <div class="cart-info" @click="showCart" v-if="authStore.isAuthenticated">
          <span class="cart-icon">🛒</span>
          <span class="cart-count" v-if="cartItemCount > 0">{{ cartItemCount }}</span>
        </div>
        
        <div class="user-menu" v-if="authStore.isAuthenticated">
          <div class="user-info" @click="toggleUserMenu">
            <span class="user-name">{{ authStore.user?.name }}</span>
            <span class="user-role">{{ authStore.isAdmin ? '管理员' : '用户' }}</span>
            <span class="dropdown-arrow">▼</span>
          </div>
          <div v-if="userMenuOpen" class="user-dropdown">
            <router-link to="/profile" class="dropdown-item">个人信息</router-link>
            <button @click="handleLogout" class="dropdown-item logout">退出登录</button>
          </div>
        </div>
        
        <div class="auth-buttons" v-else>
          <router-link to="/login" class="auth-btn login-btn">登录</router-link>
          <router-link to="/register" class="auth-btn register-btn">注册</router-link>
        </div>
      </div>
    </nav>

    <!-- 页面内容 -->
    <router-view />

    <!-- 购物车模态框 -->
    <Cart 
      :isOpen="cartOpen" 
      @close="hideCart"
      @recharge="showRecharge"
      @checkout="handleCheckout"
      v-if="authStore.isAuthenticated"
    />

    <!-- 充值模态框 -->
    <Recharge 
      :isOpen="rechargeOpen" 
      @close="hideRecharge"
      @recharged="handleRecharged"
      v-if="authStore.isAuthenticated"
    />
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useCartStore } from '../stores/cart'
import { useAuthStore } from '../stores/auth'
import Cart from './Cart.vue'
import Recharge from './Recharge.vue'

const router = useRouter()
const cartStore = useCartStore()
const authStore = useAuthStore()

const cartOpen = ref(false)
const rechargeOpen = ref(false)
const userMenuOpen = ref(false)

const userBalance = computed(() => cartStore.userBalance)
const cartItemCount = computed(() => cartStore.cartItemCount)

onMounted(() => {
  authStore.restoreAuth()
})

const showCart = () => {
  cartOpen.value = true
}

const hideCart = () => {
  cartOpen.value = false
}

const showRecharge = () => {
  rechargeOpen.value = true
}

const hideRecharge = () => {
  rechargeOpen.value = false
}

const toggleUserMenu = () => {
  userMenuOpen.value = !userMenuOpen.value
}

const handleLogout = () => {
  authStore.logout()
  userMenuOpen.value = false
  router.push('/')
}

const handleRecharged = (amount) => {
  console.log(`充值成功: ¥${amount}`)
}

const handleCheckout = (order) => {
  console.log('购买成功:', order)
  hideCart()
}

// 点击外部关闭用户菜单
document.addEventListener('click', (e) => {
  if (!e.target.closest('.user-menu')) {
    userMenuOpen.value = false
  }
})
</script>

<style scoped>
.layout {
  min-height: 100vh;
}
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #4a6fa5, #6a4a9e);
  color: white;
  padding: 0 20px;
  height: 60px;
  position: relative;
}
.logo {
  font-size: 20px;
  font-weight: bold;
}
.nav-links {
  display: flex;
  gap: 20px;
}
.nav-links a {
  color: white;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background 0.3s;
}
.nav-links a.active,
.nav-links a:hover {
  background: rgba(255, 255, 255, 0.2);
}

.user-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.balance {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.1);
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
}

.recharge-btn {
  background: #27ae60;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.recharge-btn:hover {
  background: #219a52;
}

.cart-info {
  position: relative;
  cursor: pointer;
  padding: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  transition: background 0.3s;
}

.cart-info:hover {
  background: rgba(255, 255, 255, 0.2);
}

.cart-icon {
  font-size: 18px;
}

.cart-count {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #e74c3c;
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}

.user-menu {
  position: relative;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}

.user-info:hover {
  background: rgba(255, 255, 255, 0.2);
}

.user-name {
  font-weight: 500;
}

.user-role {
  font-size: 12px;
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 6px;
  border-radius: 3px;
}

.dropdown-arrow {
  font-size: 10px;
  transition: transform 0.3s;
}

.user-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 120px;
  z-index: 1000;
  margin-top: 5px;
}

.dropdown-item {
  display: block;
  padding: 10px 15px;
  color: #333;
  text-decoration: none;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background 0.3s;
  font-size: 14px;
}

.dropdown-item:hover {
  background: #f8f9fa;
}

.dropdown-item.logout {
  color: #dc3545;
  border-top: 1px solid #eee;
}

.dropdown-item.logout:hover {
  background: #f8d7da;
}

.auth-buttons {
  display: flex;
  gap: 10px;
}

.auth-btn {
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s;
}

.login-btn {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.login-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.register-btn {
  background: #28a745;
  color: white;
  border: 1px solid #28a745;
}

.register-btn:hover {
  background: #218838;
}

@media (max-width: 768px) {
  .navbar {
    padding: 0 15px;
  }
  
  .nav-links {
    gap: 10px;
  }
  
  .nav-links a {
    padding: 6px 8px;
    font-size: 14px;
  }
  
  .user-actions {
    gap: 10px;
  }
  
  .balance {
    font-size: 12px;
  }
  
  .auth-btn {
    padding: 6px 12px;
    font-size: 12px;
  }
}
</style>